<template>
  <WsmTable
    ref="table"
    load-url="/logger-server/logger/loggerrequestlog/page"
    :change-load="true"
    :convert="convert"
    v-model="queryFormType"
  >
    <template #title>{{ t('logger.request.title') }}</template>
    <template #query="{ data }">
      <el-form-item prop="appName" :label="t('logger.request.appName')">
        <el-select style="width: 200px" v-model="data.appName.value">
          <el-option
            v-for="item in microservices"
            :key="item.appName"
            :label="item.appNote"
            :value="item.appName"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('logger.request.url')">
        <el-input v-model="data.url.value" :placeholder="t('logger.request.url')" />
      </el-form-item>
      <el-form-item :label="t('logger.request.requestMethod')">
        <el-radio-group v-model="data.requestMethod.value">
          <el-radio value="">{{ t('dbms.interCode.all') }}</el-radio>
          <el-radio value="POST">POST</el-radio>
          <el-radio value="GET">GET</el-radio>
          <el-radio value="PUT">PUT</el-radio>
          <el-radio value="DELETE">DELETE</el-radio>
        </el-radio-group>
      </el-form-item>
    </template>
    <template #button="{ row }">
      <template v-if="row">
        <el-button v-hasPermi="'detail'" @click="detail(row.id)" type="primary">{{
          t('common.detail')
        }}</el-button>
      </template>
    </template>
    <template #column>
      <el-table-column prop="requestMethod" :label="t('logger.request.requestMethod')" width="100">
        <template #default="scope">
          <template v-if="scope.row.requestMethod == 'POST'">
            <el-tag type="success">{{ scope.row.requestMethod }}</el-tag>
          </template>
          <template v-else-if="scope.row.requestMethod == 'PUT'">
            <el-tag type="warning">{{ scope.row.requestMethod }}</el-tag>
          </template>
          <template v-else-if="scope.row.requestMethod == 'GET'">
            <el-tag type="primary">{{ scope.row.requestMethod }}</el-tag>
          </template>
          <template v-else-if="scope.row.requestMethod == 'DELETE'">
            <el-tag type="danger">{{ scope.row.requestMethod }}</el-tag>
          </template>
          <template v-else>
            <el-tag type="info">{{ scope.row.requestMethod }}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="userName" :label="t('logger.request.userName')" width="180" />
      <el-table-column prop="orgId" :label="t('logger.request.orgId')" width="250" />
      <el-table-column prop="appName" :label="t('logger.request.appName')" width="120" />
      <el-table-column prop="name" :label="t('logger.request.name')" width="120" />
      <el-table-column prop="url" :label="t('logger.request.url')" />
      <el-table-column prop="logTime" :label="t('logger.request.logTime')" width="180" />
    </template>
  </WsmTable>
  <RequestLogDetail ref="requestLogDetail" />
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { listApi as listMicroservices } from '@/api/dbms/microservices'
import {
  ConvertType,
  OrgConvertType,
  QueryFormType,
  QueryType
} from '@/components/WsmTable/src/types'
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import RequestLogDetail from './components/RequestLogDetail.vue'

const { t } = useI18n()

//表格对象
const table = ref()
const props = withDefaults(
  defineProps<{
    token: string
    userId: string
    orgId: string
  }>(),
  {
    token: '',
    userId: '',
    orgId: ''
  }
)
//查询定义
const queryFormType: QueryFormType = {
  token: {
    value: props.token,
    queryType: QueryType.EQ,
    clear: false
  },
  userId: {
    value: props.userId,
    queryType: QueryType.EQ,
    clear: false
  },
  orgId: {
    value: props.orgId,
    queryType: QueryType.EQ,
    clear: false
  },
  url: {
    value: '',
    queryType: QueryType.LIKE
  },
  appName: {
    value: '',
    queryType: QueryType.EQ
  },
  requestMethod: {
    value: '',
    queryType: QueryType.EQ
  }
}

const convert = ref<ConvertType>({
  dateFormat: [
    {
      name: 'logTime',
      format: 'yyyy-MM-dd HH:mm:ss'
    }
  ],
  orgConvert: [
    {
      name: 'orgId',
      type: OrgConvertType.ORG_SHORT_NAME
    }
  ]
})

const microservices = ref()

const loadMicroservice = async () => {
  const rs = await listMicroservices()
  if (rs.success) {
    microservices.value = rs.data
  }
}
loadMicroservice()

const requestLogDetail = ref()

const detail = (id) => {
  requestLogDetail.value.show(id)
}
</script>

<style scoped></style>
